import React, { memo, useState } from "react";

import { loginUser } from "@/data/login";
// ui库
import { LockOutlined, UserOutlined } from "@ant-design/icons";
import { Button, Checkbox, Form, Input, message } from "antd";

import { useNavigate } from "react-router-dom";
import { loginType } from "./type";
import { login } from "@/store/modules/auth/action";
import { useDispatch } from "react-redux";

import { LoginWrapper } from "./style";

const Login = memo(() => {
  const navigate = useNavigate();
  const dispatch = useDispatch();

  const onFinish = (values: loginType) => {
    const loginMessage: any = {
      name: values.username,
      password: values.password,
    };

    // 判断用户账号与测试账号是否一致
    if (loginMessage.name === loginUser.userInfo.name) {
      // 密码是否一致
      if (loginMessage.password === loginUser.userInfo.password) {
        // 是否记住,存储到loaclStorage
        if (values.remember) {
          localStorage.setItem("userInfo", JSON.stringify(loginUser.userInfo));
        }

        dispatch(login(loginMessage));
        // 跳转
        message.success("登录成功！");
        navigate("/admin");
      } else {
        message.error("您所输入的密码有误！");
      }
    } else {
      message.error("您所输入的账号有误！");
    }
    // login(loginMessage)
  };

  const onFinishFailed = (errorInfo: any) => {
    message.error("您所输入的账号或密码有误！");
  };

  /**
   * 根据loaclstoage来获取账密
   * @param info
   * @returns
   */
  const getCheck = (info: string) => {
    const userInfo: string | null = localStorage.getItem("userInfo");
    if (userInfo) {
      const { name, password } = JSON.parse(userInfo);
      // console.log(objUserInfo);
      if (info === "name") return name;
      if (info === "password") return password;
    }
    return;
  };

  return (
    <LoginWrapper>
      <div className="login">
        <p className="title">
          C<span>/\</span>T/FFEE
        </p>
        <Form
          className="form"
          name="basic"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          style={{ maxWidth: 400 }}
          initialValues={{ remember: true }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
        >
          {/* 账号 */}
          <Form.Item
            name="username"
            rules={[{ required: true, message: "请输入账号" }]}
            initialValue={getCheck("name")}
          >
            <Input
              prefix={<UserOutlined className="site-form-item-icon" />}
              placeholder="请输入账号 | 测试账号:admin"
            />
          </Form.Item>

          {/* 密码 */}
          <Form.Item
            name="password"
            rules={[{ required: true, message: "请输入密码" }]}
            initialValue={getCheck("password")}
          >
            <Input.Password
              prefix={<LockOutlined className="site-form-item-icon" />}
              type="password"
              placeholder="请输入密码 | 测试账号:123456"
            />
          </Form.Item>

          <Form.Item
            className="remember"
            name="remember"
            valuePropName="checked"
            wrapperCol={{ offset: 0, span: 24 }}
          >
            <Checkbox>记住我</Checkbox>
          </Form.Item>

          <Form.Item wrapperCol={{ offset: 0, span: 24 }}>
            <Button type="primary" block htmlType="submit">
              登录
            </Button>
          </Form.Item>
        </Form>
      </div>
    </LoginWrapper>
  );
});

export default Login;
